<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.out{width:310px; height:310px;border:1px solid green; position:relative;}
.smallimg{width:310px;height:310px;}
.bigimg{width:310px;height:310px;border:1px solid green; position:absolute;left:320px;top:0; overflow:hidden; display:none;}
.moves{position:absolute;top:0;left:0;}
</style>
<script src="../pengxuan.js"></script>
<script>
window.onload=function(){
	var out=getClass('out')[0];
	var smallimg=getClass('smallimg',out)[0];
	var bigimg=getClass('bigimg',out)[0];
	var moves=getClass('moves',bigimg)[0];
	hover(smallimg,function(){
		bigimg.style.display='block';	
	},function(){
		bigimg.style.display='none';	
	})	
	
	smallimg.onmousemove=function(e){
		var ev=e||event;
		var ox=ev.offsetX||ev.layerX;
		var oy=ev.offsetY||ev.layery;
		moves.style.left=-((moves.offsetWidth-bigimg.offsetWidth)/smallimg.offsetWidth*ox)+'px';	
		moves.style.top=-((moves.offsetHeight-bigimg.offsetHeight)/smallimg.offsetHeight*oy)+'px';	
		
	};
};
</script>
</head>

<body>
<div class="out">
	<div class="smallimg"><img src="../img/small.jpg" /></div>
    <div class="bigimg"><img src="../img/big.jpg" class="moves" /></div>
</div>
</body>
</html>
